<template>
  <div class="searchwrap">
    <span>
      <el-input v-model="skey" placeholder="请输入搜索关键字" />
    </span>
    <div class="btns">
      <el-icon style="vertical-align: middle">
        <Search />
      </el-icon>
    </div>
    <div class="paneldiv" v-if="showPanelFlag">
      <div
        class="pchild"
        @click="goMap(item)"
        v-for="(item, index) in pointList.arr"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
  <div class="hide">
    <span> 地图显示已绘制地块 </span>
    <div>
      <el-switch @change="switchChange" v-model="switchFlag" />
    </div>
  </div>
  <div class="rightwrap3">
    <div class="czdiv" v-if="bhFlag" @click="bhHandele()">闭合</div>
    <div class="zawwrap">
      <div class="czdiv zawdiv" v-if="zawShow" @click="zawHandele()">
        障碍物
      </div>
      <div
        class="czdiv"
        v-if="wcFlag && !bhFlag && !zawFlag"
        @click="wcHandele()"
      >
        完成
      </div>
    </div>

    <!-- <div class="r1">
      <img src="@/assets/img/jia.png" class="pic s1" alt="" />
      <img src="@/assets/img/jian.png" class="pic" alt="" />
    </div> -->
  </div>
  <div id="mapContainer2"></div>
  <popWindows
    @closeWindow="closeWindow"
    :data="propsData.areaData"
    ref="boxcontent"
  />
  <!-- <div class="bntss">
    <div class="one" @click="goStep">
      <span>
        <el-icon><Back /></el-icon>
      </span>
      上一步
    </div>
   
  </div> -->
</template>
  
<script lang="ts">
import {
  defineComponent,
  ref,
  computed,
  reactive,
  onMounted,
  onUnmounted,
  watch,
} from "vue";
import MapInit from "@/components/mapContainer/mapInit.js";
import popWindows from "@/components/popWindows/windows-1.vue";
import { post, get } from "@/public/request/api";
import { tr } from "element-plus/es/locale";
var polygon = null;
export default defineComponent({
  components: {
    popWindows,
  },
  setup(props, context) {
    const flag = ref(false);
    let pointList = reactive({
      arr: [],
    });
    let showPanelFlag = ref(false);
    let skey = ref("");
    let time = ref<any>(null);
    watch(skey, (n, o) => {
      if (time !== null) {
        clearTimeout(time);
      }
      time = setTimeout(() => {
        searchOne(n);
      }, 380);
    });
    const boxcontent = ref<any>(null);
    const propsData = reactive({
      areaData: {},
    });
    let switchFlag = ref(false);
    const etuokeJson = require("@/assets/json/etuokeqianBanner.json");
    const txtMenuItem = ref([
      {
        text: "放大",
        callback: function () {
          map.zoomIn();
        },
      },
      {
        text: "缩小",
        callback: function () {
          map.zoomOut();
        },
      },
      {
        text: "放置到最大级",
        callback: function () {
          map.setZoom(18);
        },
      },
      {
        text: "查看全国",
        callback: function () {
          map.setZoom(4);
        },
      },
      {
        text: "获得右键点击处坐标",
        isDisable: false,
        callback: function (lnglat) {
          console.log(lnglat.getLng() + "," + lnglat.getLat());
        },
      },
    ]);
    const data = ref([
      {
        name: "城川苏坝海子村",
        contacts: "白占富",
        phone: "15847477469",
        address: "鄂托克前旗城川镇",
        area: "60亩大田",
        crop: "玉米",
        variety: "鲜食玉米335",
        density: "等行距6000株",
        cover: "是",
        interplant: "玉米大豆间套种",
        quality: "优秀",
        starLevel: 5,
        points: [
          [107.51127, 38.20215],
          [107.51442, 38.20431],
          [107.52224, 38.19951],
          [107.5169, 38.19343],
        ],
        color: "rgba(20, 204, 131, 1)",
        fillColor: "rgba(20, 204, 131, 0.40)",
      },
      {
        name: "城川嘎查",
        contacts: "宝劳代",
        phone: "13847735827",
        address: "鄂托克前旗城川镇",
        area: "107亩大田",
        crop: "玉米",
        variety: "青贮玉米",
        density: "等行距6000株",
        cover: "是",
        interplant: "玉米大豆间套种",
        quality: "良好",
        starLevel: 4,
        points: [
          [107.51371, 38.20594],
          [107.51441, 38.20671],
          [107.52127, 38.21156],
          [107.524, 38.20378],
          [107.51317, 38.20512],
          [107.51357, 38.20522],
        ],
        color: "rgba(49, 193, 245, 1)",
        fillColor: "rgba(49, 193, 245, 0.40)",
      },
      {
        name: "城川苏坝海子村",
        contacts: "边生明",
        phone: "15047599244",
        address: "鄂托克前旗城川镇",
        area: "80亩大田",
        crop: "土豆",
        variety: "青贮土豆",
        density: "等行距6000株",
        cover: "是",
        interplant: "玉米土豆间套种",
        quality: "中等",
        starLevel: 3,
        points: [
          [107.524, 38.20378],
          [107.51317, 38.20512],
          [107.52227, 38.1995],
          [107.52401, 38.2016],
          [107.52424, 38.2016],
          [107.52457, 38.20124],
          [107.52472, 38.20197],
        ],
        color: "rgba(229, 138, 46, 1)",
        fillColor: "rgba(229, 138, 46, 0.40)",
      },
      {
        name: "城川嘎查",
        contacts: "崔广成",
        phone: "13484730991",
        address: "鄂托克前旗城川镇",
        area: "130亩大田",
        crop: "土豆",
        variety: "青贮土豆",
        density: "等行距6000株",
        cover: "是",
        interplant: "玉米土豆间套种",
        points: [
          [107.49391, 38.17088],
          [107.49751, 38.17212],
          [107.50758, 38.16506],
          [107.49894, 38.16152],
        ],
        color: "rgba(229, 138, 46, 1)",
        fillColor: "rgba(229, 138, 46, 0.40)",
      },
      {
        name: "城川大沟湾",
        contacts: "郭永生",
        phone: "13734833043",
        address: "鄂托克前旗城川镇",
        area: "110亩大田",
        crop: "土豆",
        variety: "青贮土豆",
        density: "等行距6000株",
        cover: "是",
        interplant: "玉米土豆间套种",
        points: [
          [107.42861, 38.19929],
          [107.4285, 38.19999],
          [107.43034, 38.20104],
          [107.43899, 38.195],
          [107.44251, 38.19149],
          [107.44066, 38.19041],
        ],
        color: "rgba(20, 204, 131, 1)",
        fillColor: "rgba(20, 204, 131, 0.40)",
      },
      {
        name: "城川苏坝海子村",
        contacts: "李万林",
        phone: "1884755951",
        address: "鄂托克前旗城川镇",
        area: "70亩大田",
        crop: "土豆",
        variety: "青贮土豆",
        density: "等行距6000株",
        cover: "是",
        interplant: "玉米土豆间套种",
        points: [
          [107.46316, 38.2095],
          [107.46711, 38.21759],
          [107.47301, 38.21759],
          [107.47293, 38.21714],
          [107.47463, 38.21388],
          [107.47037, 38.21244],
          [107.47022, 38.21296],
        ],
        color: "rgba(49, 193, 245, 1)",
        fillColor: "rgba(49, 193, 245, 0.40)",
      },
    ]);
    let map = null;
    let zoom = 14;
    let layL = null;
    let layT = null;
    let T = null;
    let polygonTool = null;
    let drawAddress = null
    let plotArea = ref("");
    let pointGet = reactive({
      value: [],
    });
    let polygon = null;
    let zawFlag = ref(false);
    let bhFlag = ref(false);
    let wcFlag = ref(false);
    let zawShow = ref(false);
    let zawpolygon = null;
    let bhpolygon = null;
    var sendOverPlot = [];
    var sendScPlot = []
    let allPolygonGet=[]
    let showArea=''
    // 生命周期
    onMounted(() => {
      //
      init();
    });

    onUnmounted(() => {
      //
    });

    // methods
    function zawHandele() {
      zawShow.value = false;
      zawFlag.value = true;
      bhpolygon.disableEdit();
      draw();
    }
    function bhHandele() {
      console.log('闭合');
      let points = [];
      pointGet.value.forEach((item) => {
        points.push(new T.LngLat(item.lng, item.lat));
      });
      if (!zawFlag.value) {
        bhpolygon = new T.Polygon(points, {
          color: "blue",
          weight: 3,
          opacity: 0.5,
          fillColor: "#FFFFFF",
          fillOpacity: 0.5,
        });
        bhpolygon.enableEdit();
        //向地图上添加面
        map.addOverLay(bhpolygon);
        zawShow.value = true;
        //$(".zawdiv").css("visibility", "visible");
      } else {
        zawpolygon = new T.Polygon(points, {
          color: "#ccc",
          weight: 3,
          opacity: 0.5,
          fillColor: "#000",
          fillOpacity: 0.5,
        });
        zawpolygon.enableEdit();
        //向地图上添加面
        map.addOverLay(zawpolygon);
        zawFlag.value = false;
        //$(".wcdiv").css("disblock", "block");
      }
      polygonTool.close();
      polygonTool.clear();
      bhFlag.value = false;
      wcFlag.value = true;
    }
    function wcHandele() {
      let realArea = 0
      if (zawpolygon) {
        console.log('bhpolygon', bhpolygon.ht[0])
        console.log('zawpolygon', zawpolygon.ht[0])
        realArea = computeSignedArea(bhpolygon.ht[0]) * 0.0015
        let qcArea = computeSignedArea(zawpolygon.ht[0]) * 0.0015
        showArea=(realArea - qcArea).toFixed(3)
        sendScPlot = zawpolygon.ht[0]
      } else {
        console.log('zawpolygon', zawpolygon)
        realArea = computeSignedArea(bhpolygon.ht[0]) * 0.0015
        showArea=(realArea).toFixed(3)
      }
      sendOverPlot = bhpolygon.ht[0];
      let centerGet = getCenterPoint(sendOverPlot);
      getAddressFromPoint(centerGet.lng, centerGet.lat);
    }
    function getCenterPoint(geoCoordinateList) {
      const geoCoordinateListFlat = geoCoordinateList.reduce((s, v) => {
        return (s = s.concat(v));
      }, []);
      const total = geoCoordinateListFlat.length;
      let X = 0;
      let Y = 0;
      let Z = 0;
      for (const g of geoCoordinateListFlat) {
        const lat = (g.lat * Math.PI) / 180;
        const lon = (g.lng * Math.PI) / 180;
        const x = Math.cos(lat) * Math.cos(lon);
        const y = Math.cos(lat) * Math.sin(lon);
        const z = Math.sin(lat);
        X += x;
        Y += y;
        Z += z;
      }

      X = X / total;
      Y = Y / total;
      Z = Z / total;
      const Lon = Math.atan2(Y, X);
      const Hyp = Math.sqrt(X * X + Y * Y);
      const Lat = Math.atan2(Z, Hyp);

      return { lng: (Lon * 180) / Math.PI, lat: (Lat * 180) / Math.PI };
    }
    function searchOne(key) {
      $.ajax({
        url: "https://api.tianditu.gov.cn/v2/search",
        type: "get",
        contentType: "application/json;charset=UTF-8", //指定消息请求类型
        data: {
          // 注意参数格式
          postStr: JSON.stringify({
            // 关键字
            keyWord: key,
            // 地图等级，需要设置整数
            level: 20,
            // 地图范围
            mapBound: "73.33,3.51,135.05,53.33",
            // 查询类型
            queryType: "2",
            // 分页
            start: "0",
            count: "10",
          }),
          type: "query",
          // 请更换自己的 tk，此 tk 只能在当前域名下使用
          tk: "df534ec8d8d41d3679d21150e93dd2b5",
        },
        success: function (res, status) {
          if (res.pois) {
            showPanelFlag.value = true;
            pointList.arr = res.pois;
          }

          //res.pois && addMarkerList(res.pois);
        },
      });
    }
    function closeWindow() {
      //polygon.closeInfoWindow
    }
    function draw() {
      let color = zawFlag.value ? "red" : "#ffcd42";
      let fillcolor = zawFlag.value ? "red" : "#ffdc00";
      polygonTool = new T.PolygonTool(map, {
        showLabel: false, // 不显示面积信息
        color: color,
        weight: 3,
        opacity: 0.5,
        fillColor: fillcolor,
        fillOpacity: 0.5,
      });
      polygonTool.open();
      polygonTool.addEventListener("draw", drawFinish); // 监听双击绘制完成事件，调用drawFinish方法
    }
    function drawFinish(e) {
      console.log("顶点坐标列表 ----------> ", e.currentLnglats);
      let sendPoint = [];
      e.currentLnglats.forEach((item, index) => {
        if (index < e.currentLnglats.length)
          sendPoint[index] = {
            lat: item.lat,
            lng: item.lng,
          };
      });
      console.log("sendPoint", sendPoint);
      pointGet.value = sendPoint;
      let setArea = computeSignedArea(sendPoint);
      console.log("setArea", setArea);
      plotArea.value = (setArea * 0.0015).toFixed(3);
      bhFlag.value = true;
    }
    function getAddressFromPoint(lgtd, lttd) {
      $.ajax({
        url: "https://api.tianditu.gov.cn/geocoder",
        type: "GET",
        contentType: "application/json;charset=utf-8",
        data: {
          tk: "df534ec8d8d41d3679d21150e93dd2b5",
          type: "geocode",
          postStr: "{'lon':" + lgtd + ",'lat':" + lttd + ",'ver':1}",
        },
        success: function (data) {
          var addressdata = eval("(" + data + ")");
          drawAddress = addressdata.result.formatted_address;
          console.log('drawAddress',drawAddress);
         
            context.emit("goStep", {
              step: 1,
              address: drawAddress,
              area: showArea,
              point: sendOverPlot,
              inPoints: sendScPlot
            });
            console.log('xxx',
              {
                step: 1,
                address: drawAddress,
                area: showArea,
                point: sendOverPlot,
                inPoints: sendScPlot
              }
            )  
          
          
        },
        error: function (er, er1, er2) {
          //alert("获取失败");
        },
      });
    }
    function computeSignedArea(path) {
      let radius = 6371009;
      let len = path.length;
      if (len < 3) return 0;
      let total = 0;
      let prev = path[len - 1];
      let prevTanLat = Math.tan((Math.PI / 2 - (prev.lat / 180) * Math.PI) / 2);
      let prevLng = (prev.lng / 180) * Math.PI;
      for (let i in path) {
        let tanLat = Math.tan(
          (Math.PI / 2 - (path[i].lat / 180) * Math.PI) / 2
        );
        let lng = (path[i].lng / 180) * Math.PI;
        total += polarTriangleArea(tanLat, lng, prevTanLat, prevLng);
        prevTanLat = tanLat;
        prevLng = lng;
      }
      return Math.abs(total * (radius * radius));
    }
    function switchChange(e) {
      if (e) {
        if (allPolygonGet.length>0) {
          allPolygonGet.forEach(item=>{
            item.onRemove();
          })
        }
        getAllPlot();
      } else {
        console.log("let polygon=null", polygon);
        allPolygonGet.forEach(item=>{
            item.onRemove();
        })
        //polygon = null;
      }
    }
    function getAllPlot() {
      get("/plot/map", {}).then((res) => {
        let arrGet = [];
        let addArr = [];

        res.data.forEach((item) => {
          console.log("item", item);
          if (item.inodeList) {
            let point = [];
            item.inodeList.forEach((item2) => {
              let one = [];
              one[0] = item2.lng;
              one[1] = item2.lat;
              point.push(one);
            });

            addArr.push({
              inPoints:item.inPoints,
              plotId: item.id,
              name: item.plotName,
              contacts: item.principalName,
              phone: item.principalTel,
              address: item.address,
              area: item.plotArea,
              crop: "暂无信息",
              variety: "鲜食玉米335",
              density: "等行距6000株",
              cover: "是",
              interplant: "玉米大豆间套种",
              quality: "优秀",
              starLevel: 5,
              points: point,
              // points: [
              //   [107.51127, 38.20215],
              //   [107.51442, 38.20431],
              //   [107.52224, 38.19951],
              //   [107.5169, 38.19343],
              // ],
              color: "rgba(20, 204, 131, 1)",
              fillColor: "rgba(20, 204, 131, 0.40)",
            });
          }
        });
        arrGet = addArr;
        //map.value.init();
        console.log("arrGet", arrGet);
        arrGet.forEach((item) => {
          drawArea(item);
        });
      });
    }
    function polarTriangleArea(tan1, lng1, tan2, lng2) {
      let deltaLng = lng1 - lng2;
      let t = tan1 * tan2;
      return 2 * Math.atan2(t * Math.sin(deltaLng), 1 + t * Math.cos(deltaLng));
    }
    //初始化地图
    const init = () => {
      MapInit.init().then((res) => {
        T = res;
        let imageURL =
          "http://t0.tianditu.gov.cn/img_w/wmts?" +
          "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
          "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=729cb66926dcefcee8742ff04c4bf35a";
        let imageURT =
          "http://t0.tianditu.gov.cn/cia_w/wmts?" +
          "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
          "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=729cb66926dcefcee8742ff04c4bf35a";
        //创建自定义图层对象
        layL = new T.TileLayer(imageURL, { minZoom: 5, maxZoom: 18 });
        layT = new T.TileLayer(imageURT, { minZoom: 5, maxZoom: 18 });
        let config = { layers: [layL, layT] };
        //初始化地图对象
        map = new T.Map("mapContainer2", config);
        let LngLat = etuokeJson.features[0].properties.center;
        //设置显示地图的中心点和级别
        //108.406082, 37.701533
        map.centerAndZoom(new T.LngLat(108.406082, 37.701533), zoom);
        // map.centerAndZoom(new T.LngLat(LngLat[0], LngLat[1]), zoom);
        //允许鼠标滚轮缩放地图
        map.enableScrollWheelZoom();
        draw();
      });
    };

    //添加右键菜单
    const addMenu = () => {
      let menu = new T.ContextMenu({ width: 140 });
      for (var i = 0; i < txtMenuItem.value.length; i++) {
        //添加菜单项
        var item = new T.MenuItem(
          txtMenuItem.value[i].text,
          txtMenuItem.value[i].callback
        );
        menu.addItem(item);
        if (i == 1 || i == 3) {
          //添加分割线
          menu.addSeparator();
        }
      }
      map.addContextMenu(menu);
    };

    //添加地图多边形覆盖
    const drawArea = (data) => {
      console.log('data!!!',data)
      let points = [];
      data.points.forEach((item) => {
        points.push(new T.LngLat(item[0], item[1]));
      });
      //创建面对象
      polygon = new T.Polygon(points, {
        data: data,
        color: data.color,
        weight: 3,
        opacity: 1,
        fillColor: data.fillColor,
        fillOpacity: 1,
      });
      //向地图上添加面
      polygon.addEventListener("click", () => {
        let infoWin1 = new T.InfoWindow(boxcontent.value.$refs.popW, {
          minWidth: 320,
          maxWidth: 320,
          maxHeight: 300,
          closeOnClick: true,
        });
        polygon.openInfoWindow(infoWin1);

        propsData.areaData = data;
      });
      if(data.inPoints){
        let points = [];
        JSON.parse(data.inPoints).forEach((item) => {
          points.push(new T.LngLat(item['lng'],item['lat']));
        });
        let polygonSc = new T.Polygon(points, {
          color: 'red',
          weight: 1,
          opacity: 0.5,
          fillColor: 'red',
          fillOpacity: .5,
        });
        allPolygonGet.push(polygonSc)
        map.addOverLay(polygonSc);
      }
      allPolygonGet.push(polygon)
      map.addOverLay(polygon);
    };

    //覆盖物点击事件
    const polygonClick = (e) => {
      console.log(e);
    };

    //行政区划描边
    const drawLine = () => {
      let lines = etuokeJson.features[0].geometry.coordinates;
      let points = [];
      let style = {
        color: "red",
        weight: 4,
        opacity: 1,
        lineStyle: "dashed",
        fillColor: "transprent",
        fillOpacity: 0,
      };
      lines.forEach((line) => {
        var point = new T.LngLat(line[0], line[1]);
        points.push(point);
      });
      var poly = new T.Polygon(points, style);
      map.addOverLay(poly);
    };
    const goMap = (val) => {
      let get = val.lonlat.split(",");
      map.centerAndZoom(new T.LngLat(get[0], get[1]), zoom);
      let info = {
        name: val.name,
        address: val.address,
      };
      addOnePoint(get, info);
      showPanelFlag.value = false;
    };
    function addOnePoint(item, info) {
      let icon = new T.Icon({
        iconUrl: require("../../assets/img/address.png"),
        iconSize: new T.Point(30, 30),
        //iconAnchor: T.Point(30, 30)
      });
      let markers = new T.Marker(new T.LngLat(item[0], item[1]), {
        //item[0]是经度，item[1]是纬度
        icon: icon,
      });
      let content = "";
      if (info) {
        content = `<div>${info.name}</div></br><div>${info.address}</div>`;
      } else {
        content = `<div>我的位置</div>`;
      }
      addClickHandler(content, markers);
      markers.content = content;
      map.addOverLay(markers);
    }
    function addClickHandler(content, marker) {
      marker.addEventListener("click", function (e) {
        openInfo(content, e);
      });
    }
    function openInfo(content, e) {
      var point = e.lnglat;
      let marker = new T.Marker(point); // 创建标注
      var markerInfoWin = new T.InfoWindow(content, {
        offset: new T.Point(0, -30),
      });
      map.openInfoWindow(markerInfoWin, point); // 开启信息窗口
    }
    function goStep() {
     
    }

    return {
      zawShow,
      zawHandele,
      wcFlag,
      bhFlag,
      wcHandele,
      zawFlag,
      bhHandele,
      switchChange,
      skey,
      boxcontent,
      drawArea,
      flag,
      propsData,
      closeWindow,
      switchFlag,
      draw,
      polygonTool,
      drawFinish,
      pointList,
      goMap,
      showPanelFlag,
      plotArea,
      goStep,
    };
  },
});
</script>
  
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.zawdiv {
  background: red !important;
}

.czdiv {
  background: #097fe5;
  padding: 5px 15px;
  font-size: 20px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  line-height: 25px;
}
.zawwrap {
  display: flex;
}
.bntss {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 35px;
  position: absolute;
  width: 200px;
  z-index: 9999;

  left: 50%;
  bottom: -3%;
  right: 50%;
  transform: translate(-50%, -50%);
  .one {
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    span {
      margin-right: 5px;
      position: relative;
      top: 2px;
    }
    .span2 {
      margin-left: 5px;
      margin-right: 0px !important;
    }
  }
  .one2 {
    margin-left: 40px;
    background: rgba(9, 127, 229, 1) !important;
  }
}
.tdt-infowindow-scrolled {
  height: auto !important;
  border: none !important;
  width: 600px !important;
}
.rightwrap3 {
  position: absolute;
  right: 30px;
  bottom: 80px;
  z-index: 19;
  .r11 {
    margin-bottom: 10px;
  }
  .r1 {
    background: #fff;
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    padding: 6px 3px;

    .stop {
      background: rgba(245, 98, 98, 1);
      width: 24px;
      height: 24px;
      border-radius: 100px;
      cursor: pointer;
    }
    .s1 {
      margin-bottom: 10px;
    }
    .pic {
      width: 24px;
      cursor: pointer;
    }
  }
}
.hide {
  background: #fff;
  border-radius: 5px;
  color: rgba(98, 100, 102, 1);
  position: absolute;
  left: 30px;
  bottom: 80px;
  z-index: 19;
  display: flex;
  align-items: center;
  padding: 4px 10px;
  span {
    margin-right: 10px;
  }
}
.searchwrap {
  position: absolute;
  right: 30px;
  top: 30px;
  background: #fff;
  border-radius: 100px;
  width: 300px;
  padding: 5px 5px 5px 15px;
  z-index: 19;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  .paneldiv {
    position: absolute;
    top: 42px;
    z-index: 100;
    width: 90%;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    left: 5%;
    .pchild {
      margin-bottom: 5px;
      cursor: pointer;
    }
  }
  .btns {
    background: rgba(9, 127, 229, 1);
    border-radius: 20px;
    padding: 5px 10px;
    color: #fff;
  }
}
#mapContainer {
  width: 100%;
  height: 90%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  padding-bottom: 100px;
}
#mapContainer2 {
  width: 100%;
  height: 90%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  padding-bottom: 100px;
}
.tdt-infowindow-content-wrapper {
  // min-width: 320px;
  // min-height: 200px;
  background: rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px);
  opacity: 1;

  border-radius: 10px;
  color: #333;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}
.tdt-container a.tdt-infowindow-close-button {
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  font: 24px/24px Tahoma, Verdana, sans-serif;
  color: #fff;
}
</style>
  